<script setup lang="ts">
import { computed } from 'vue'
import { RouterView, useRoute } from 'vue-router'
import AppHeader from '@/components/header/AppHeader.vue'
import AppAsideMenu from '@/components/aside/AppMenu.vue'

const size = 'small'
const route = useRoute()
const hideNav = computed(() => {
  return route.meta && route.meta.hideNav
})
const hideAside = computed(() => {
  return route.meta && route.meta.hideAside
})
</script>

<template>
  <ElConfigProvider :size="size">
    <ElContainer :class="['app-container']">
      <ElHeader :class="['app-header']" v-if="!hideNav">
        <AppHeader />
      </ElHeader>
      <ElContainer :class="['app-main-container']">
        <ElAside :class="['app-aside']" v-if="!hideAside">
          <AppAsideMenu />
        </ElAside>
        <ElMain :class="['app-main', hideNav && hideAside ? 'full-main' : '']">
          <RouterView />
        </ElMain>
      </ElContainer>
    </ElContainer>
  </ElConfigProvider>
</template>
<style lang="less">
.app-container {
  height: 100%;
}

.app-header {
  background-color: #222222;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.el-aside.app-aside {
  width: 200px;
  height: 100%;
}

.el-main.full-main {
  padding: 0;
}

.el-main.app-main {
  background-color: #ecefff;
}
</style>
